import React, { useState } from 'react'
import './index.css'
export default function Item({ id, todo, done, todoList, setTodoList }) {
  const [isActive, setIsActive] = useState(false)
  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }
  const checkChangeHandle = (e) => {
    const newTodoList = todoList.map((item) => {
      if (item.id === id) {
        return { ...item, done: e.target.checked }
      }
      return item
    })
    setTodoList(newTodoList)
  }
  const deleteHandle = () => {
    const newTodoList = todoList.filter(item => item.id !== id)
    setTodoList(newTodoList)
  }
  return (
    <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" onClick={deleteHandle} style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
